import React, { Component } from 'react'
import {Link,Route} from "react-router-dom"

import Detail from "./Detail"

export default class Message extends Component {
    state = {
        navList: [
            { id: 1, message: "消息1" },
            { id: 2, message: "消息2" },
            { id: 3, message: "消息3" }
        ]
    }
    replaceShow = (id) => {
        // replace 跳转 + 携带 params 参数
        // this.props.history.replace(`/home/message/detail/${id}`)
        
        // replace 跳转 + 携带 search 参数
        // this.props.history.replace(`/home/message/detail/?id=${id}`)
        
        // replace 跳转 + 携带 state 参数
        this.props.history.replace({pathname:`/home/message/detail/?id=${id}`,state:{id}})
    }
    pushShow = (id) =>{
        // push 跳转 + 携带 params 参数
        // this.props.history.push(`/home/message/detail/${id}`)
        
        // push 跳转 + 携带 search 参数
        // this.props.history.push(`/home/message/detail/?id=${id}`)
        
        // push 跳转 + 携带 state 参数
        this.props.history.push({pathname:`/home/message/detail/?id=${id}`,state:{id}})
    }
    back = () => {
        this.props.history.goBack()
    }
    forward = () => {
        this.props.history.goForward()
    }
    go = () => {
        this.props.history.go(-2)
    }
    render() {
        const { navList } = this.state
        return (
            <div>
                <ul>
                    {
                        navList.map(item => {
                            return <li key={item.id}>
                                {/* 传递params参数 */}
                                {/* <Link to={`/home/message/detail/${item.id}`}>{item.message}</Link> */}

                                {/* 传递search参数 */}
                                {/* <Link to={`/home/message/detail/?id=${item.id}`}>{item.message}</Link> */}

                                {/* 传递 state 参数 */}
                                <Link to={{pathname:"/home/message/detail",state:{id:item.id}}}>{item.message}</Link>
                                &nbsp;<button onClick={()=>this.pushShow(item.id)}>push查看</button>
                                &nbsp;<button onClick={()=>this.replaceShow(item.id)}>replace查看</button>
                            </li>
                        })
                    }
                </ul>
                <hr/>
                {/* 声明接收 params 参数 */}
                {/* <Route path="/home/message/detail/:id" component={Detail} /> */}

                {/* search参数无需声明接收，正常注册组件即可 */}
                {/* <Route path="/home/message/detail" component={Detail} /> */}

                {/* state参数无需声明接收，正常注册组件即可 */}
                <Route path="/home/message/detail" component={Detail} />

                <button onClick={this.back}>前进</button>
                <button onClick={this.forward}>后退</button>
                <button onClick={this.go}>go</button>
            </div>
        )
    }
}
